refactor(ui): centralize compact icon button sizing in EMCN by BillLeoutsakosvl346 · Pull Request #7991 · simstudioai/sim

BillLeoutsakosvl346 · 2026-09-18T23:27:37Z

Summary

Product icon buttons repeatedly set square dimensions and zero padding through consumer classes. Add Button's iconSize option and migrate all 25 matching EMCN Button locations across 10 product files, including the shared workflow action-bar recipe.

compact preserves spacing-based sizing (size-6); compact-fixed preserves fixed 24px sizing. Both own zero padding while retaining the selected size and variant's typography, corners, icon strokes and colors. This keeps the original behavior when the browser's font size changes. Consumers retain positioning, canvas width overrides, icons, labels, disabled conditions and handlers. Omitting the new option leaves existing buttons unchanged.

BulkActionButton and ComposerActionButton exclude the inherited iconSize and iconPadding props because these specialized controls already own their geometry. Their rendering is unchanged. Landing pages, global CSS, dependencies and audit tooling are excluded.

The message Copy/Like/Dislike/Fork actions use the shared quiet compact treatment: 26px becomes 24px, the corner radius becomes 5px, and neutral/hover colours and pending opacity follow Button defaults. These small visual differences are intentional; their native disabled state, handlers and labels are retained. The geometry-preservation statements above concern the original 25 EMCN Button migrations.

Validation

350 EMCN tests pass. All 26 workspace type checks and lint checks, API validation, import-specifier checks and diff checks pass.
The initial migration's category audit removed all 32 targeted overrides; seven additional action-bar usages were verified through their shared recipe. Consumer AST and render comparisons preserve handlers and the original class sets, including 448 action-bar combinations and 210 existing Button variant/size/padding combinations.
The original 920 isolated Chromium comparisons cover light/dark themes, normal/enlarged root font sizes and idle/hover/focus/active/disabled states. The subsequent specialized-prop restrictions affect types only.
External combined-source compiler assertions confirm fixed-geometry controls reject generic icon sizing while Button retains both meaningful sizing options. No audit helpers or extra type-test fixtures are included in this PR.

vercel · 2026-09-18T23:27:43Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
docs	Ready	Preview	Sep 24, 2026 11:48pm UTC

greptile-apps · 2026-09-18T23:30:03Z

Confidence Score: 5/5

The PR appears safe to merge, with no outstanding findings or new changes requiring review since the previous review.

Summary

The PR centralizes compact icon-button geometry in EMCN and migrates product controls away from repeated sizing and padding classes.

Adds responsive compact and fixed-pixel compact-fixed icon-size variants to the shared Button.
Migrates compact controls across workspace and workflow-renderer surfaces while retaining consumer-specific behavior and positioning.
Prevents specialized bulk and composer action buttons from accepting generic geometry props.
Adds coverage for equivalent class output and explicit padding/width precedence.
No code has changed since the previous review.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
    C[Product icon-button consumers] --> B[EMCN Button]
    B --> R{iconSize}
    R -->|compact| S[Spacing-based 24px square]
    R -->|compact-fixed| F[Fixed 24px square]
    S --> P[Zero default padding]
    F --> P
    P --> O[Consumer classes retain positioning and overrides]
    B -. geometry props excluded .-> BA[BulkActionButton]
    B -. geometry props excluded .-> CA[ComposerActionButton]

_{Reviews (6) · Last reviewed commit: "improvement(ui): reuse compact buttons f..."}

cubic-dev-ai

No issues found across 12 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-18T23:34:47Z

@greptile

BillLeoutsakosvl346 · 2026-09-19T19:58:38Z

@greptileai @cubic-dev-ai Please review the current head; the previous scored reviews cover earlier commits.

cubic-dev-ai · 2026-09-19T19:58:50Z

@greptileai @cubic-dev-ai Please review the current head; the previous scored reviews cover earlier commits.

@BillLeoutsakosvl346 I’ve started reviewing the changes since the last completed review. I’ll post the results here when it’s done.

cubic-dev-ai

0 issues found across 3 files (changes from recent commits).

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-19T20:03:27Z

@greptileai @cubic-dev-ai Please review the latest commit. The import-order directive now uses TSDoc while retaining the documented import order and passing Biome.

cubic-dev-ai · 2026-09-19T20:03:38Z

@greptileai @cubic-dev-ai Please review the latest commit. The import-order directive now uses TSDoc while retaining the documented import order and passing Biome.

@BillLeoutsakosvl346 I’ve started reviewing the changes since the last completed review. I’ll post the results here when it’s done.

cubic-dev-ai

0 issues found across 1 file (changes from recent commits).

_{Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-19T20:08:43Z

@cubic-dev-ai Please run a full review of this PR against its base branch on the current head, rather than an incremental review of only the latest commit. The latest incremental review reported no issues; this is the final review of the complete change.

cubic-dev-ai · 2026-09-19T20:08:51Z

@cubic-dev-ai Please run a full review of this PR against its base branch on the current head, rather than an incremental review of only the latest commit. The latest incremental review reported no issues; this is the final review of the complete change.

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

No issues found across 14 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-21T17:57:05Z

Before / after visual comparison

Representative icon-button sizing combinations after replacing local size classes with shared sizes.

Within each numbered tile: first control = before; second control = after.

Rendered component fixtures with application CSS and local data, rather than authenticated product-page screenshots. These are representative visual examples, not end-to-end behavior coverage.

The fixture uses a generic X icon to isolate button sizing; these are not screenshots of the actual caller icons. This comparison covers the sizing migration, not every message-action interaction.

Current PR head checked at posting: 0be585b6b3.

Additional theme/state comparisons

Co-authored-by: Bill Leoutsakos <billleoutsakos@Mac.localdomain>

BillLeoutsakosvl346 · 2026-09-22T19:28:01Z

@greptile

BillLeoutsakosvl346 · 2026-09-22T19:28:02Z

@cubic-dev-ai review this PR

cubic-dev-ai · 2026-09-22T19:28:08Z

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

All reported issues were addressed across 16 files

_{Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-22T19:38:28Z

@greptile

BillLeoutsakosvl346 · 2026-09-22T19:38:29Z

@cubic-dev-ai review this PR

cubic-dev-ai · 2026-09-22T19:38:35Z

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

No issues found across 16 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

* improvement(emcn): share ordinary action geometry in Button * improvement(ui): use inline Button for small text actions (#8177) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * fix(emcn): assert responsive icon size map as const --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

* improvement(emcn): share ordinary action geometry in Button * improvement(ui): share canvas toolbar controls * improvement(ui): reuse Button treatments for canvas actions (#8155) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * fix(ui): preserve canvas action hover treatment * fix(ui): retain muted canvas icon and import conventions * refactor(emcn): keep Button hover variant self-contained --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

* improvement(emcn): share ordinary action geometry in Button * improvement(ui): share browser toolbar actions * refactor(ui): remove redundant browser action client boundary * improvement(ui): use regular geometry for browser actions (#8157) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * fix(ui): preserve browser toolbar button footprint --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

* improvement(emcn): share ordinary action geometry in Button * improvement(ui): share additional-field disclosures * fix(ui): preserve tiny actions and use shared sidebar geometry * improvement(ui): use shared geometry for standard icon actions (#8153) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * refactor(ui): centralize overlay action buttons in EMCN (#7990) * refactor(ui): centralize overlay action buttons in EMCN * improvement(ui): share workflow preview actions (#8065) * improvement(ui): share workflow preview actions * improvement(ui): reuse inline and overlay workflow actions * refactor(emcn): share Code.Viewer appearances (#8238) * Add shared Code.Viewer appearances for product surfaces * Test flat virtualized Code.Viewer terminal chrome --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * Share table sidebar shell and scroll body (#8249) * Share table sidebar shell and scroll body * test(tables): cover shared sidebar dialog state * test(tables): preserve sidebar scroll state --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * Keep workflow preview values readable (#8256) * fix(ui): keep preview values readable and restore version tint * fix(ui): keep preview file actions inert --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Waleed <walif6@gmail.com> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Waleed <walif6@gmail.com> * improvement(ui): reuse shared button and focus treatments (#8187) * improvement(ui): reuse shared button and focus treatments * fix(emcn): include outline reset in muted focus ring * fix(ui): make closed table sidebars inert and strengthen focus ring * Carry code search overlay into the live EMCN stack (#8275) * refactor(ui): share code search overlay controls * refactor(emcn): own compact code search field chrome * test(ui): cover floating compact code search * refactor(emcn): compose compact search from shared chip surface --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * fix(ui): announce code search result changes * docs(ui): describe shared table sidebar exports --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Codex <codex@openai.com> Co-authored-by: Waleed <walif6@gmail.com>

* improvement(emcn): share ordinary action geometry in Button * improvement(emcn): consolidate selection controls and styling options * test(emcn): read email geometry from the public export * improvement(emcn): share larger chip and field geometry (#8151) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * refactor(ui): use EMCN fields in deployment and setup modals (#8009) * improvement(emcn): share larger chip and field geometry * refactor(ui): use EMCN fields in deployment and setup modals * improvement(ui): reuse chip for PII configuration action (#8173) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * improvement(ui): compose horizontal and credential fields in EMCN (#8164) * improvement(ui): compose horizontal and credential fields in EMCN * Share deploy chat field error treatment (#8255) * refactor(ui): share deploy chat field error treatment * refactor(ui): name deploy error props --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * improvement(ui): share knowledge filter headings (#8073) * improvement(ui): share knowledge filter headings * improvement(ui): share inline filter and pagination actions (#8163) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * improvement(ui): use chip fields in workflow search and replace (#8076) * improvement(emcn): share larger chip and field geometry * improvement(ui): use chip fields in workflow search and replace * fix(ui): use shared centered chip content on chat errors * improvement(ui): use chips for ordinary product actions (#8081) * improvement(ui): use chips for ordinary product actions * improvement(ui): use shared chip alignment * improvement(ui): use shared search action sizes (#8160) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * improvement(ui): reuse chips for custom block upload actions (#8084) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * fix(chat): use native attachment action (#8265) * fix(chat): use native attachment action * fix(chat): retain disabled attachment tooltip --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * fix(chat): use EMCN icon button target for attachments * refactor(ui): centralize destructive ghost button colors in EMCN (#7988) * improvement(emcn): share larger chip and field geometry * refactor(ui): use EMCN fields in deployment and setup modals * refactor(ui): centralize destructive ghost button colors in EMCN * improvement(ui): use standard knowledge tag icon size * refactor(ui): consolidate product corner radii * improvement(ui): reuse chip for PII configuration action (#8173) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * refactor(ui): share collapsible workflow field cards (#8017) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * improvement(ui): compose horizontal and credential fields in EMCN (#8164) * improvement(ui): compose horizontal and credential fields in EMCN * Share deploy chat field error treatment (#8255) * refactor(ui): share deploy chat field error treatment * refactor(ui): name deploy error props --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Waleed <walif6@gmail.com> * improvement(ui): share public headings and product typography (#8069) * improvement(emcn): share larger chip and field geometry * improvement(ui): share public authentication headings * improvement(ui): share workflow panel tab buttons (#8072) * improvement(ui): share workflow panel tab buttons * improvement(ui): reuse chips for panel selection actions (#8166) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * refactor(ui): share account headings and auth control sizing (#8074) * improvement(ui): share account status headings * improvement(ui): use shared sizing for auth controls * refactor(emcn): share invalid OTP slot treatment (#8246) * Add shared invalid state to EMCN OTP slots * fix(ui): distinguish OTP verification from resend errors * test(ui): type OTP input queries as inputs * test(ui): import OTP test button prop type * test(ui): use shared logger mock in OTP regression --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Waleed <walif6@gmail.com> * improvement(ui): share missing resource states (#8078) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * improvement(ui): reuse avatars for owners and members (#8079) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * fix(ui): adopt exact shared 18px typography token * fix(ui): preserve panel and auth control semantics --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Waleed <walif6@gmail.com> * fix(ui): preserve shared tag actions and product styling fallbacks * fix(ui): keep logs filters on canonical chip height --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Codex <codex@openai.com> Co-authored-by: Waleed <walif6@gmail.com>

vercel Bot deployed to Preview September 18, 2026 23:29 View deployment

greptile-apps Bot reviewed Sep 18, 2026

View reviewed changes

Comment thread packages/emcn/src/components/button/button.test.tsx Outdated

cubic-dev-ai Bot reviewed Sep 18, 2026

View reviewed changes

vercel Bot deployed to Preview September 18, 2026 23:35 View deployment

vercel Bot deployed to Preview September 19, 2026 16:38 View deployment

cubic-dev-ai Bot reviewed Sep 19, 2026

View reviewed changes

greptile-apps Bot reviewed Sep 19, 2026

View reviewed changes

Comment thread packages/emcn/src/components/button/button.test.tsx Outdated

cubic-dev-ai Bot reviewed Sep 19, 2026

View reviewed changes

vercel Bot deployed to Preview September 19, 2026 20:05 View deployment

cubic-dev-ai Bot reviewed Sep 19, 2026

View reviewed changes

vercel Bot temporarily deployed to Preview September 21, 2026 03:32 Inactive

Bill Leoutsakos and others added 5 commits September 22, 2026 12:20

refactor(emcn): centralize compact icon button sizing

91bf6ae

test(emcn): follow documented button test import order

8012ece

fix(emcn): restrict specialized action button sizing props

8618d27

style(test): use TSDoc for the import-order directive

18c007a

improvement(ui): reuse compact buttons for message actions (#8087)

13f85d8

Co-authored-by: Bill Leoutsakos <billleoutsakos@Mac.localdomain>

BillLeoutsakosvl346 force-pushed the codex/control-fix-icon-button-sizing branch from 0be585b to 13f85d8 Compare September 22, 2026 19:28

vercel Bot deployed to Preview September 22, 2026 19:29 View deployment

greptile-apps Bot reviewed Sep 22, 2026

View reviewed changes

Comment thread apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx

cubic-dev-ai Bot reviewed Sep 22, 2026

View reviewed changes

Comment thread apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx

cubic-dev-ai Bot reviewed Sep 22, 2026

View reviewed changes

vercel Bot deployed to Preview September 23, 2026 02:14 View deployment

BillLeoutsakosvl346 mentioned this pull request Sep 24, 2026

improvement(ui): share browser toolbar actions #8068

Merged

6 tasks

BillLeoutsakosvl346 and others added 2 commits September 24, 2026 16:18

vercel Bot temporarily deployed to Preview September 24, 2026 23:18 Inactive

vercel Bot deployed to Preview September 24, 2026 23:33 View deployment

BillLeoutsakosvl346 mentioned this pull request Sep 24, 2026

Consolidate EMCN controls and redundant styling options #7998

Merged

vercel Bot deployed to Preview September 24, 2026 23:48 View deployment

Conversation

BillLeoutsakosvl346 commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Validation

Uh oh!

vercel Bot commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps Bot commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Confidence Score: 5/5

Summary

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

BillLeoutsakosvl346 commented Sep 18, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

BillLeoutsakosvl346 commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

BillLeoutsakosvl346 commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

BillLeoutsakosvl346 commented Sep 21, 2026

Before / after visual comparison

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 22, 2026

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 22, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

BillLeoutsakosvl346 commented Sep 18, 2026 •

edited

Loading

vercel Bot commented Sep 18, 2026 •

edited

Loading

greptile-apps Bot commented Sep 18, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading